<template>
  <div class="page-bg">
    <editPage @subForm="subForm" v-loading="loading">
      <formItem name="标题" required>
        <el-input
          placeholder="请输入"
          maxlength="100"
          v-model="formData.name"
          show-word-limit
        />
      </formItem>
      <formItem name="分类" required>
        <selectType v-model="formData.type_id" :type="typeItemTypeName.goods" />
      </formItem>
      <formItem name="价格(元)">
        <el-input
          placeholder="请输入"
          type="number"
          maxlength="7"
          v-model="formData.price"
          show-word-limit
        />
      </formItem>
      <formItem name="seo关键词">
        <el-input
          v-model.trim="formData.keywords"
          type="textarea"
          placeholder="请输入(选填)"
        ></el-input>
      </formItem>
      <formItem name="seo描述">
        <el-input
          v-model.trim="formData.description"
          type="textarea"
          placeholder="请输入(选填)"
        ></el-input>
      </formItem>
      <formItem name="产品图片" required>
        <formImg v-model="formData.img" @pickImg="pickImg('img', $event)" />
      </formItem>
      <formItem name="详情">
        <editor
          ref="editorRef"
          @selectImg="pickImg('editor')"
          :showTemplate="false"
        />
      </formItem>
      <formItem name="商品是否显示">
        <el-switch
          active-value="1"
          inactive-value="0"
          v-model="formData.a_show"
          active-text="显示"
          inactive-text="隐藏"
        >
        </el-switch>
      </formItem>
    </editPage>
    <layerImg v-model="imgOption.show" @getImg="getImg" />
  </div>
</template>

<script setup lang="ts">
import { editPage, formItem, editor } from "@/components/editPage";
import { layerImg, formImg, useImgHook } from "@/components/formImg";
import config from "@/config";
import { ElMessage } from "element-plus";
import { post } from "@/common/http";
import selectType from "@/components/selectType.vue";
import { typeItemTypeName } from "@/common/interface";

const route = useRoute();
const router = useRouter();
const editorRef = ref<any>(null); //富文本
const loading = ref(false);
const queryID = route.query?.id; //页面参数
const formData = ref<any>({
  name: "",
  type_id: "",
  price: "",
  sort: "",
  img: "",
  a_show: "1",
  keywords: "",
  description: "",
});

onMounted(() => {
  if (queryID) {
    //获取编辑详情
    loading.value = true;
    post("api/goods/get_detail_a", { id: queryID }).then((res) => {
      formData.value = res.data.details;
      formData.value.img = res.data.details.img;

      //编辑器默认值
      editorRef.value.content = res.data.details.content;
      loading.value = false;
    });
  }
});

const { imgOption, pickImg } = useImgHook();

// const testImg = ref<string[]>([]);

//获取弹窗选择的图片
function getImg(data: any) {
  //单图上传
  if (imgOption.option.name === "img") {
    formData.value.img = data.imgUrl;
  }

  //多图上传
  // if (imgOption.option.name === "imgs") {
  //   if (imgOption.option.index != -1) {
  //     testImg.value[imgOption.option.index] = data.imgUrl;
  //   } else {
  //     testImg.value.push(data.imgUrl);
  //   }
  // }

  //编辑器图片上传
  if (imgOption.option.name === "editor") {
    //编辑器选择图片
    editorRef.value.editorObj.execCommand(
      "inserthtml",
      `<p><img style='max-width:100%' src='${
        config.serverImg + data.imgUrl
      }'/></p>`
    );
  }
}

//提交
function subForm() {
  let data = toRaw(formData.value);
  if (!data.name) return ElMessage.error("请输入产品名称");
  if (!data.img.length) return ElMessage.error("请上传产品图片");
  if (!data.type_id) return ElMessage.error("请选择产品类型");
  data.img = data.img;
  data.content = editorRef.value.content;
  if (queryID) data.id = queryID;
  post("api/goods/saveData", data).then((res) => {
    ElMessage.success(res.msg);
    setTimeout(() => {
      router.push("/goods/list");
    }, 1000);
  });
}
</script>

<script lang="ts">
export default {
  name: "GoodsEdit",
};
</script>


<style lang="scss" scoped></style>
